<template>
  <div>
    <div class="navtop">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <div class="head">
            <el-row :gutter="10">
              <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
                <div><img class="logo" src="@/assets/打脸.png" alt="" /></div>
              </el-col>
              <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9"
                ><div>
                  <div class="serachnav">
                    <el-input
                      placeholder="请输入内容"
                      prefix-icon="el-icon-search"
                      v-model="searchval.q"
                    >
                    </el-input
                    ><el-button
                      type="text"
                      class="serachbtn"
                      @click="search()"
                      >搜索</el-button
                    >
                  </div>
                </div></el-col
              >
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2"></el-col>
              <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10"
                ><div class="navright">
                  <el-link :underline="false" class="alinkson"
                    >关于打脸</el-link
                  >
                  <el-link :underline="false" class="alinkson"
                    >圈币充值</el-link
                  >
                  <el-link :underline="false" class="alinkson"
                    >创作者服务</el-link
                  >
                  <el-link :underline="false" class="alinkson" @click="fabu"
                    >发布flag</el-link
                  >

                  <div class="avacar">
                    <div>
                      <el-avatar
                        style="width=50px"
                        :src="'http://localhost:3000/' + user.header"
                        :title="user.name"
                      ></el-avatar>
                    </div>

                    <el-dropdown class="names" @command="handleCommand">
                      <span class="el-dropdown-link">
                        {{ user.name }}
                      </span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item :command="grzx"
                          >个人中心</el-dropdown-item
                        >
                        <el-dropdown-item :command="exit"
                          >退出</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                </div></el-col
              >
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 20px">
      <el-row :gutter="10">
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
          <div class="grid-content">
            <div class="navfirst">
              <el-menu default-active="2" class="el-menu-vertical-demo">
                <el-menu-item>
                  <i class="el-icon-s-home"></i>
                  <span slot="title" @click="shouye">首页</span>
                </el-menu-item>
                <el-menu-item>
                  <i class="el-icon-s-order"></i>
                  <span slot="title" >精选</span>
                </el-menu-item>
              </el-menu>
            </div>
            <div class="navtwo">
              <el-menu default-active="2" class="el-menu-vertical-demo">
                <el-menu-item>
                  <i class="el-icon-s-home"></i>
                  <span slot="title">学习</span>
                </el-menu-item>
                <el-menu-item>
                  <i class="el-icon-s-opportunity"></i>
                  <span slot="title">运动</span>
                </el-menu-item>
                <el-menu-item>
                  <i class="el-icon-s-order"></i>
                  <span slot="title">早起</span>
                </el-menu-item>
                <el-menu-item>
                  <i class="el-icon-s-order"></i>
                  <span slot="title">技能</span>
                </el-menu-item>
                <el-menu-item>
                  <i class="el-icon-s-order"></i>
                  <span slot="title">读书</span>
                </el-menu-item>
                <el-menu-item>
                  <i class="el-icon-s-order"></i>
                  <span slot="title">其他</span>
                </el-menu-item>
              </el-menu>
            </div>
          </div>
        </el-col>
        <el-col :xs="21" :sm="21" :md="21" :lg="21" :xl="21">
          <div class="body">
          <div class="all" v-for="flag in flags" :key="flag.id">
      <div class="tiaozhanjin">
        <span>￥{{ flag.money }}</span>
      </div>

      <img
        class="imgclass"
        :src="'http://localhost:3000/' + flag.img" 
        alt=""
        @click="xianqing"
      />

      <div class="content">{{ flag.flagname }}</div>
      <div class="date">{{ flag.date }}</div>
      <div class="jingdu">{{ flag.process.one }}/{{ flag.process.two }}</div>
      <el-avatar
        class="avatar"
        size="small"
        :src="'http://localhost:3000/' + flag.header"
      ></el-avatar>

      <div class="name">{{ flag.name }}</div>
      <el-button
        class="btns"
        size="small"
        type="warning"
        round
        @click="lkwg(flag)"
        v-if="flag.status == 0"
        >已围观</el-button
      >
      <el-button
        class="btn"
        size="small"
        type="warning"
        round
        @click="lkwg(flag)"
        v-if="flag.status == 1"
        >立即围观</el-button
      >
    </div>
    </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import api from "../api/api.js";
export default {
  data() {
    return {
      types: [],
      user: [],
      searchval: {
        q: "",
      },
      flags: [],
      params: {},
    
    };
  },
  created() {
    // this.shouye();
    this.loginuser();
    this.query();
  },

  methods: {
    handleCommand(command) {
      command();
    },
    shouye() {
      this.$router.replace("/index/Danmu");
    },
    grzx() {
      this.$router.push("/personage");
    },
    exit() {
      this.$router.push("/login");
      window.sessionStorage.setItem("token", "");
    },
    fabu() {
      this.$router.push("/test5");
    },
    search() {
    api
        .__api_list_flags(this.searchval)
        .then((res) => {
          this.flags=res;
        })
        .catch((err) => {
          console.error(err);
        });
       
    },
    //
    query() {
      api
        .__api_list_flags()
        .then((res) => {
          this.flags = res;
          console.log(res);
        })
        .catch((err) => {
          console.error(err);
        });
    },
    xianqing() {
      this.$router.push("/page");
    },
    //立即围观
    lkwg(flag) {
      flag.status == 1 ? 0 : 1;
      alert(flag.status);
      this.axios
        .put("http://localhost:3000/flag/" + flag.id, {...flag} )
        .then((res) => {
          console.log(res);
          this.query();
        })
        .catch((err) => {
          console.error(err);
        });
    },

    //登录头像等信息查询
    loginuser() {
      api
        .__api_index_users()
        .then((res) => {
          console.log(res);
          this.user = res;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
<style scoped>
.navtop {
  position: fixed;
  width: 100%;
  z-index: 10000;
  background-color: #ffffff;
  top: 0px;
}
.head {
  box-shadow: 0 2px 12px 0 rgba(201, 11, 11, 0.1);
  /* position: fixed; */
  /* background-color: blue; */
  box-sizing: border-box;
  height: 63px;
}
.grid-content {
  border-radius: 4px;
  min-height: 60px;
}

.logo {
  /* logo */
  /* s */
  width: 60px;
  height: 60px;
}
.serachnav {
  /* 搜索框框 */
  position: relative;
  margin-top: 20px;
}

.serachbtn {
  /*搜索字体*/
  position: absolute;
  right: 5px;
  color: #8d8b8b;
  font-size: 12px;
}
.navright {
  /* 右边导航条 */
  position: relative;
  margin-top: 30px;
  margin-left: 140px;
}
.alinkson {
  /* 右边导航条每条 */
  margin-left: 10px;
  margin-right: 10px;
  font-size: 14px;
}
.avacar {
  /* 头像 */
  position: absolute;
  top: -10px;
  left: 450px;
}
.names {
  width: 70px;
  position: absolute;
  left: 40px;
  top: 15px;
  bottom: 10px;
  color: #8d8b8b;
  font-size: 12px;
}

/* */
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 300px;
}

.navfirst {
  /* 右边第一条导航栏 */
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 200px;
  position: fixed;
  margin-top: 70px;
}
.navtwo {
  /* 右边第二条导航栏 */
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  width: 200px;
  position: fixed;
  margin-top: 200px;
}

.body {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
}
.all {
  position: relative;
  width: 240px;
  height: 280px;
  margin-left: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}
.imgclass {
  width: 240px;
  height: 220px;
  object-fit: contain;
}
.jingdu {
  font-size: 12px;
  position: absolute;
  color: #ffd41a;
  background: #000000;
  opacity: 0.8;
  border-radius: 5px;
  width: 60px;
  left: 179px;
  bottom: 260px;
}
.content {
  position: absolute;
  font-size: 12px;
  left: 10px;
}
.date {
  position: absolute;
  font-size: 10px;
  left: 180px;
  bottom: 40px;
}
.avatar {
  position: absolute;
  right: 210px;
  top: 240px;
}
.tiaozhanjin {
  position: absolute;
  font-size: 11px;
  color: #ffd41a;
  background: #000000;
  opacity: 0.8;
  border-radius: 5px;
  left: 5px;
  top: 5px;
}
.name {
  position: absolute;
  font-size: 11px;
  left: 40px;
  bottom: 15px;
}
.btn {
  font-size: 10px;
  position: absolute;
  left: 165px;
  top: 245px;
}
.btns {
  font-size: 10px;
  position: absolute;
  left: 165px;
  top: 245px;
  background: #8d8b8b;
  border-color: #8d8b8b;
}
</style>
